<template>
  <div class="flex justify-center items-center h-screen bg-gray-100">
    <!-- Element UI 的 Card 没有 header 插槽，改用 title 属性 -->
    <el-card class="p-8 rounded shadow-md w-full max-w-md" header="注册">
      <h2 slot="header" class="text-2xl font-bold">注册</h2>

      <!-- el-form 添加 label-position 替代原属性 -->
      <el-form
          :model="form"
          :rules="rules"
          ref="formRef"
          label-width="100px"
          class="center-form"
          label-position="right"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名" class="short-input" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱" class="short-input" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" placeholder="请输入密码" class="short-input" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">注册</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// Vue 2 需要改为 options API
export default {
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于 6 位', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          console.log('注册成功', this.form);
          // 新增跳转到登录页
          this.$router.push('/login');
          this.$message.success('注册成功，请登录');
        }
      });
    }
  }
}

</script>

<style scoped>
.short-input {
  width: 200px;
}

.center-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Element UI 需要手动添加卡片阴影样式 */
.el-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>